<template>
  <div class="personnelManagement-container">
    <modules-title title-name="新建账号">
      <template slot="btn">
        <el-button class="main-btn" size="small" type="primary" @click="submit()">保存</el-button>
        <el-button class="border-btn" size="small" @click="console()">取消</el-button>
      </template>
    </modules-title>
    <div class="form">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!--        <el-form-item label="登录账号" prop="user_name">-->
<!--          <el-col :span="6">-->
<!--            <el-input v-model="ruleForm.user_name"></el-input>-->
<!--          </el-col>-->
<!--        </el-form-item>-->
        <el-form-item label="手机" prop="mobile">
          <el-col :span="6">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-col :span="6">
            <el-input type="password" v-model="ruleForm.password" autocomplete="new-password"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="真实姓名" prop="real_name">
          <el-col :span="6">
            <el-input v-model="ruleForm.real_name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-col :span="6">
            <div class="selectSex">
              <div class="sex">
                <el-radio v-model="ruleForm.sex" label="1" border align="center">男</el-radio>
              </div>
              <div class="sex">
                <el-radio v-model="ruleForm.sex" label="2" border align="center" >女</el-radio>
              </div>
            </div>
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-col :span="6">
            <el-input v-model="ruleForm.email"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="科室" prop="section">
          <el-col :span="6">
            <el-select
              style="width: 100%"
              v-model="ruleForm.section"
              filterable
              allow-create
              default-first-option
              placeholder="请选择科室">
              <el-option
                v-for="item in selectOptions"
                :key="item.id"
                :label="item.department_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-checkbox-group v-model="ruleForm.role">
            <span v-for="item in roles" :key="item.id" class="span-el" style="padding-left: 10px">
              <el-checkbox :label="item.role_code">{{item.role_name}}</el-checkbox>
              <el-tooltip effect="dark" :content="item.remark" placement="right-start">
                <i class="el-icon-question" style="color:#51ABBB;cursor:pointer;margin-left: 4px;font-size: 14px"></i>
              </el-tooltip>
            </span>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="保密设置" prop="sex">
          <el-col :span="6">
            <div class="selectSex">
              <div class="sex">
                <el-radio v-model="ruleForm.secrecy" label="1" border align="center">个人</el-radio>
              </div>
              <div class="sex">
                <el-radio v-model="ruleForm.secrecy" label="2" border align="center">科室</el-radio>
              </div>
              <div class="sex">
                <el-radio v-model="ruleForm.secrecy" label="3" border align="center">全部</el-radio>
              </div>
            </div>
          </el-col>
          <el-col :span="6"><span style="margin-left: 8px;color:#999999">查看诊所全部患者及处方信息</span></el-col>
        </el-form-item>
        <el-form-item label="状态" prop="user_status">
          <el-col :span="6">
            <div class="selectSex">
              <div class="sex">
                <el-radio v-model="ruleForm.user_status" label="1" border align="center">启用</el-radio>
              </div>
              <div class="sex">
                <el-radio v-model="ruleForm.user_status" label="2" border align="center">禁用</el-radio>
              </div>
            </div>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import {getRoles,createID,IsMobileExist,IsNameExist,IsEmailExist} from "@/api/clinicManagement";
  import {getDepartment} from "@/api/registration";
  import modulesTitle from "@/components/modulesTitle.vue";
  export default {
    name: 'personnelManagement',
    components: { modulesTitle },
    data () {
      //登录名验证
      var checkName = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入登录帐号"));
        } else {
          this.isNameExist(this.ruleForm.user_name, function (data) {
            if (data.state) {
              callback(new Error("该登录帐号已存在！"));
            } else {
              callback();
            }
          });
        }
      }
      //手机号校验
      var checkNumber = (rule, value, callback) => {
        let regEn = /^1[3456789]\d{9}$/
        if (value === "") {
          callback(new Error("请输入手机号"));
        }else if (!regEn.test(value)) {
          callback(new Error('请输入正确手机号码'))
        }else {
          this.disabled = false;
          this.isMobileExist(this.ruleForm.mobile, function (data) {
            if (data.state) {
              callback(new Error("该手机号已存在！"));
            } else {
              callback();
            }
          });
        }
      }
      //验证邮箱
      var checkEmail = (rule, value, callback) => {
        let regEn = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
        if(value===''){
          callback()
        } else if (!regEn.test(value)) {
          callback(new Error('请输入正确邮箱格式'))
        } else {
          this.disabled = false;
          this.isEmailExist(this.ruleForm.email, function (data) {
            if (data.state) {
              callback(new Error("该邮箱已注册"));
            } else {
              callback();
            }
          });
        }
      }
      return {
        ruleForm:{
          user_name:'',
          password:'',
          real_name:'',
          sex:'1',
          mobile:'',
          email:'',
          section:'',
          role:[],
          secrecy:'1',
          user_status:"1",
        },
        roles:[],
        selectOptions:[],
        mobileExist:false,
        nameExist:false,
        emailExist:false,
        disabled:false,
        disabled1:false,
        rules:{
          user_name: [
            { required: true, trigger: 'blur',validator:checkName },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur',},
            { min: 6, max: 12, message: '请输入6-12位的密码，可包含数字和字母', trigger: 'blur' }
          ],
          real_name: [
            { required: true, message: '请填写真实姓名', trigger: 'blur' }
          ],
          mobile: [
            {  required: true, trigger: 'blur',validator: checkNumber}
          ],
          email:[
            {required:false,trigger: 'blur',validator:checkEmail}
          ],
          role:[
            {
              required:true,message:'最少进行一个权限选择',trigger: 'change'
            }
          ]
        }
      }
    },
    created() {
      //获取角色列表
      getRoles().then(res=>{
        console.log(res)
        if(res.code==200){
          this.roles = res.data
        }
      })
      //获取科室
      let data={
        pager:{},
        key_word:''
      }
      getDepartment(data).then(res=>{
        console.log(res)
        this.selectOptions = res.data.data
      })
    },
    methods:{
      //登录名验证
      isNameExist(name, callback) {
        let data={
          name:name
        }
        IsNameExist(data).then((res) => {
          if (res.code === 200) {
            console.log(res.data)
            this.nameExist = res.data.is_exits;
            if (this.nameExist === true) {
              this.ruleForm.user_name = ''
              this.disabled1 = true
            }
            callback({state: this.nameExist});
          }
        });
      },
      //手机验证
      isMobileExist(mobile, callback) {
        let data={
          mobile:mobile
        }
        IsMobileExist(data).then((res) => {
          if (res.code === 200) {
            console.log(res.data)
            this.mobileExist = res.data.is_exits;
            if (this.mobileExist === true) {
              this.ruleForm.mobile = ''
              this.disabled = true
            }
            callback({state: this.mobileExist});
          }
        });
      },
      //邮箱验证
      isEmailExist(email, callback) {
        let data={
          email:email
        }
        IsEmailExist(data).then((res) => {
          if (res.code === 200) {
            console.log(res.data)
            this.emailExist = res.data.is_exits;
            if (this.emailExist === true) {
              this.ruleForm.email = ''
              // this.disabled1 = true
            }
            callback({state: this.emailExist});
          }
        });
      },
      //保存
      submit(){
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            if(this.ruleForm.sex=='1'){
              this.ruleForm.sex='男'
            }else{
              this.ruleForm.sex='女'
            }
            // let age = this.ruleForm.age.age+','+this.ruleForm.age.month+','+this.ruleForm.age.day
            let data={
              username:this.ruleForm.user_name,
              pwd:this.ruleForm.password,
              dept_id:Number(this.ruleForm.section),
              gender:this.ruleForm.sex,
              real_name:this.ruleForm.real_name,
              email:this.ruleForm.email,
              mobile:this.ruleForm.mobile,
              role_codes:this.ruleForm.role,
              user_status:Number(this.ruleForm.user_status),
              data_scope:Number(this.ruleForm.secrecy),
            }
            console.log(data)
            createID(data).then(res=>{
              if(res.code==200){
                // this.$message.success('创建成功')
                this.$router.push({
                  path: "/clinicManagement/personnelManagement"
                })
              }
            })
          } else {
            return false;
          }
        });
      },
      //取消创建账号
      console(){
        this.$router.push({
          path: "/clinicManagement/personnelManagement"
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  @import "@/assets/scss/clinicManagement/modules/personnelManagement.scss";
</style>
